<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Account,
  coinStatement,
  payStatus,
  getRecharge,
  editShipowner,
  rechargeCoin,
  renewMain,
} from "@/http/api";
import $ from "jquery";

export default {
  components: { outMain },
  name: "",
  data() {
    return {
      timer: null,
      showErweima: false,
      showRenew: false,
      year_sum: 1,
      payInfo: {},
      formEdit: {
        s_mobile: "",
        s_cz: "",
        s_txbbbh: "",
        s_txbbsxrq: "",
      },
      renewNumArr: [
        { label: "1年", value: 1 },
        { label: "2年", value: 2 },
        { label: "3年", value: 3 },
      ],
      comName: "",
      talbeData: [],
      queryData: {
        page: 1,
        per_page: 15,
      },
      total: 0,
      payActive: {},
      packArr: [],
      formData: {},
      showEdit: false,
      payMask: false,
    };
  },
  props: {},
  setup() {},
  methods: {
    showEditFn() {
      this.formEdit = {
        s_mobile: this.formData.s_mobile,
        s_cz: this.formData.s_cz,
        s_txbbbh: this.formData.s_txbbbh,
        s_txbbsxrq: this.formData.s_txbbsxrq,
      };
      this.showEdit = true;
    },
    getData() {
      Account().then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
        }
      });
    },
    getCoinData() {
      coinStatement(this.queryData).then((res) => {
        if (res.data.code == 1) {
          this.talbeData = res.data.data.data;
          this.total = res.data.data.total;
        }
      });
    },
    payItemFn(item) {
      this.payActive = item;
    },
    paySureFn() {
      rechargeCoin(this.payActive).then((res) => {
        if (res.data.code == 1) {
          this.payMask = false;
          this.payInfo = res.data.data;
          this.showErweima = true;
          this.timer = setInterval(() => {
            this.checkPayStatus();
          }, 1000);
        }
      });
    },
    checkPayStatus() {
      payStatus({ order_number: this.payInfo.order_number }).then((res) => {
        if (res.data.code == 1 && res.data.data === "success") {
          clearInterval(this.timer);
          this.showErweima = false;
          ElMessage({
            type: "success",
            message: "充值成功",
          });
          this.getData();
          this.getCoinData();
        }
      });
    },
    getPack() {
      getRecharge().then((res) => {
        if (res.data.code == 1) {
          this.packArr = res.data.data;
          this.payActive = this.packArr[0];
        }
      });
    },
    sureRenew() {
      renewMain({ year_sum: this.year_sum }).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "续费成功",
          });
          this.showRenew = false;
          this.getData();
          this.getCoinData();
        }
      });
    },
    getTime(time) {
      const y = time.getFullYear();
      const m =
        time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
      const d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate();

      const str = `${y}-${m}-${d}`;
      return str;
    },
    sureEditFn() {
      let queryData = { ...this.formEdit };
      if (queryData.s_txbbsxrq) {
        queryData.s_txbbsxrq = this.getTime(queryData.s_txbbsxrq);
      }
      editShipowner(queryData).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "编辑成功",
          });
          this.showEdit = false;
          this.getData();
        }
      });
    },
  },
  watch: {
    showErweima(value) {
      if (!value) {
        clearInterval(this.timer);
      }
    },
  },
  mounted() {},
  created() {
    this.getData();
    this.getCoinData();
    this.getPack();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>账户中心</div>
      </div>
      <div class="formMain">
        <div class="whiteBox">
          <div class="comHead">
            <div class="comInfo">
              <div class="comName">
                <div class="comNameText">
                  {{ formData.person }}({{ formData.mobile }})
                </div>
                <el-tag
                  class="comNameTag"
                  type="success"
                  v-if="formData.training_status == 1"
                  >正常</el-tag
                >
                <el-tag
                  class="comNameTag"
                  type="danger"
                  v-if="formData.training_status == 2"
                  >禁用</el-tag
                >
                <el-tag
                  class="comNameTag"
                  type="info"
                  v-if="formData.training_status == 3"
                  >已到期</el-tag
                >
              </div>

              <div class="comDes">
                <div class="comDesItem">
                  鲸币：<span class="desNum">{{ formData.jlh_coin }}</span
                  ><span class="linkText" @click="payMask = true"
                    >充值金币</span
                  >
                </div>
              </div>
              <div class="comTime">
                <div class="comTimeItem">
                  创建时间：{{ formData.create_time }}
                </div>
                <div class="comTimeItem">
                  到期时间：{{ formData.expiration_time }}
                </div>
                <span class="linkText" @click="showRenew = true">账户续费</span>
              </div>
              <div class="comDes">
                <div class="comDesItem">电话：{{ formData.s_mobile }}</div>
                <div class="comDesItem">传真：{{ formData.s_cz }}</div>
                <div class="comDesItem">
                  体系版本编号：{{ formData.s_txbbbh }}
                </div>
                <div class="comDesItem">
                  体系版本生效日期：{{ formData.s_txbbsxrq }}
                </div>
              </div>
            </div>
            <div class="ctrlBtn">
              <btnPlain value="编辑信息" @ok="showEditFn"></btnPlain>
            </div>
          </div>
          <div class="stepCont">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">鲸币充值消费记录明细</div>
              <el-table
                class="tableMain"
                :data="talbeData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="order_number"
                  width="200"
                  show-overflow-tooltip
                  label="订单号"
                />
                <el-table-column
                  prop="coin"
                  width="100"
                  show-overflow-tooltip
                  label="充值/消费"
                >
                  <template #default="{ row }">
                    <span class="greenText" v-if="row.type == 1"
                      >+{{ row.coin }}</span
                    >
                    <span class="redText" v-if="row.type == 2"
                      >-{{ row.coin }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  width="100"
                  prop="change_coin"
                  show-overflow-tooltip
                  label="剩余鲸币"
                />
                <el-table-column width="100" show-overflow-tooltip label="类型">
                  <template #default="{ row }">
                    <div class="tagGroup">
                      <el-tag type="success" v-if="row.type === 1">充值</el-tag>
                      <el-tag type="danger" v-if="row.type === 2">消费</el-tag>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="msg"
                  show-overflow-tooltip
                  label="说明"
                />
                <el-table-column
                  prop="pay_time"
                  width="200"
                  show-overflow-tooltip
                  label="创建时间"
                />
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="getCoinData"
                  @current-change="getCoinData"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog v-model="payMask" title="充值鲸币" width="600">
        <div class="payMaskCont">
          <div
            :class="
              payActive.c_sum == item.c_sum
                ? 'payItem payItemActive'
                : 'payItem'
            "
            @click="payItemFn(item)"
            :key="index"
            v-for="(item, index) in packArr"
          >
            <div class="c_num">
              <span class="bigFont">{{ item.c_sum }}</span
              ><span>鲸币</span>
            </div>
            <div class="payNum">¥{{ item.c_sum }}</div>
            <div class="s_num">多赠{{ item.s_sum }}鲸币</div>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="payMask = false">取消</el-button>
            <el-button type="primary" @click="paySureFn"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="showErweima" title="在线支付" width="400">
        <div class="payInfoCont">
          <div class="payMoneyText">
            ¥{{ payActive.c_sum }}(鲸币{{
              Number(payActive.c_sum) + Number(payActive.s_sum)
            }})
          </div>
          <div class="erweimaImg">
            <img :src="payInfo.payCode" />
          </div>
          <div class="orderNum">订单号：{{ payInfo.order_number }}</div>
          <div class="payTip">温馨提示：请使用微信支付</div>
        </div>
      </el-dialog>
      <el-dialog v-model="showRenew" title="账号续费" width="500">
        <el-form>
          <el-form-item label-width="120" label="续费时间">
            <el-select v-model="year_sum" placeholder="请选择续费时间">
              <el-option
                v-for="item in renewNumArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label-width="120" label="所需鲸币">
            <div>{{ Number(formData.xf_shipowner_money) * year_sum }}鲸币</div>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showRenew = false">取消</el-button>
            <el-button type="primary" @click="sureRenew"> 确认续费 </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog
        v-model="showEdit"
        title="编辑信息"
        :close-on-click-modal="false"
      >
        <div v-if="showEdit">
          <el-form ref="editRef" :model="formEdit">
            <el-form-item label-width="120" label="电话">
              <el-input
                clearable
                v-model="formEdit.s_mobile"
                placeholder="请输入电话"
              />
            </el-form-item>
            <el-form-item label-width="120" label="传真">
              <el-input
                clearable
                v-model="formEdit.s_cz"
                placeholder="请输入传真"
              />
            </el-form-item>
            <el-form-item label-width="120" label="体系版本编号">
              <el-input
                clearable
                v-model="formEdit.s_txbbbh"
                placeholder="请输入体系版本编号"
              />
            </el-form-item>
            <el-form-item label-width="120" label="体系版本生效日期">
              <el-date-picker
                clearable
                style="width: 100%"
                v-model="formEdit.s_txbbsxrq"
                type="date"
                placeholder="请选择体系版本生效日期"
              />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showEdit = false">取消</el-button>
            <el-button type="primary" @click="sureEditFn"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </outMain>
</template>
<style scoped lang="less">
.payMaskCont {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .payItem {
    width: 48%;
    border: 1px solid #4b58dc;
    background-color: #f6f7f9;
    border-radius: 5px;
    padding: 30px 15px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    transition: all 0.3s linear;
    margin-bottom: 20px;
    justify-content: space-between;
    color: #000;
    position: relative;
    overflow: hidden;
    .s_num {
      padding: 3px 10px;
      background-color: #4b58dc;
      color: #fff;
      position: absolute;
      right: -1px;
      top: -1px;
      border-radius: 0 0 0 5px;
      font-size: 10px;
      transition: all 0.3s linear;
    }
    .c_num {
      font-size: 12px;
      .bigFont {
        font-size: 22px;
        margin-right: 5px;
      }
    }
    .payNum {
      font-size: 18px;
    }
  }
  .payItemActive {
    background-color: #4b58dc;
    color: #fff;
    .s_num {
      background-color: #fff;
      color: #4b58dc;
    }
  }
}
</style>
